<template>
  <div class="row">
    <div class="col" v-for="childItem in childList" :key="childItem.id">
      <div
        class="role-wrap"
        :class="childItem.status ? 'left-grey-wrap' : 'left-orange-wrap'"
      >
        <img :src="childItem.src" alt="" />
        <div class="pass-wrap" v-if="childItem.status">
          {{ childItem.status }}
        </div>
      </div>
      <div
        class="right-wrap"
        :class="childItem.status ? 'grey-nowrap-text' : 'orange-nowrap-text'"
      >
        <div class="name">{{ childItem.name }}</div>
        <div class="num">{{ childItem.num }}</div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'Child',
  props: {
    childList: {
      type: Array
    }
  },
  data () {
    return {

    };
  },

  mounted () {

  },

  methods: {

  },
};
</script>

<style scoped>
.role-wrap {
  min-width: 30px;
  max-width: 68px;
  min-height: 30px;
  max-height: 68px;
  display: flex;
  justify-content: center;
  flex-direction: column;
  text-align: center;
  position: relative;
}
.left-grey-wrap {
  background: url("../../../../../assets/images/pass-background.png") no-repeat;
  background-size: 100% 100%;
}
.left-orange-wrap {
  background: url("../../../../../assets/images/role-orange-background.png")
    no-repeat;
  background-size: 100% 100%;
}
.left-grey-wrap img,
.left-orange-wrap img {
  width: 100%;
  height: 100%;
}
.right-wrap {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
}
/*
.right-wrap .name,
.right-wrap .num {
  height: 100%;
}
.right-wrap .name {
  display: flex;
  align-items: flex-start;
}
.right-wrap .num {
  display: flex;
  align-items: flex-end;
}
*/
.pass-wrap {
  position: absolute;
  top: 75%;
  width: 100%;
  text-align: center;
  color: #ffffff;
}
</style>
